目標
上一篇已經顯示了活動一覽列表
這次要顯示副本資訊
當點擊活動一覽的圖案時
會在底下顯示該活動的所有副本

由於內容篇幅過長 這部分會分成兩篇解說
第一篇將資料由B組件傳給父組件
第二篇將資料由父組件傳給C組件

步驟
1.
我們先前已經讀取Supabase資料
並存取於result

這時，要將B組件的資料傳到C組件
也就是說我們會做下圖的事情
●點擊B組件的圖片觸發事件
●將資料傳到父組件(APP.vue)
●父組件將資料遞給C組件
●C組件藉由Props接收這份動態資料

首先點擊圖片後，actionSelect與eventList會變更
接著將eventList透過response這個監聽事件傳給父組件
也就是說eventList 有變更時就會觸發這個監聽事件
以下為B組件的程式架構

<script setup>
/* global defineEmits */
const emit = defineEmits(["response"]);
const actionSelect = ref("");
const eventList = ref([]);

//...中間略

function selectAction(e) {
	var data = e.target.getAttribute("data-dataInfo");
	actionSelect.value = data;
	
	eventList.value = 
		actionSelect.value == "" 
		? result.value
		: result.value.filter(x=>x.actionNo == actionSelect.value)

	emit("response", {"actionNo":actionSelect.value,"info":eventList.value});
}
</script>

<template>
	<div class="row"><h1>活動一覽</h1></div>
	<div class="row" >
		<div class="col-3 " v-for="item in actionList" :key="item.ID">
			<img :src="getImg(item.actionNo)" style="width:100%;"
			@click="selectAction" :data-dataInfo="item.actionNo">
		</div>
	</div>
</template>

當父組件監聽到B組件有變更時
這邊會回傳東西回來 我們用B_msg 去接收這個東西
也就是說點擊B組件圖片時，eventList有變動
便會傳回到父組件的B_msg更新
那麼父組件如何將資料傳給C組件呢? 我們下一篇繼續說明
以下提供父組件的程式架構

<script setup>
..以上略

const B_Msg = ref([{}]); 
</script>

<template>
<div class="row">
				<div class = "col-12 border" style="height:250px;overflow:auto;">
					<B-action @response="(msg) => B_Msg = msg"/>
				</div>
</div>
</template>

備註

複習一下這篇做的事情
●B組件加上點擊事件 ->要傳出的資料以活動編號過濾

●點擊B組件的圖片 ->B組件再透過emit傳出資料
父組件透過監聽response的方式
接收資料，然後存給B_msg